<template>
    <div class="ck">
      <div class="header">
        <ul>
          <li><div class="head-font"></div></li>
          <li><p>&nbsp; 投资记录</p></li>
         
        </ul>
        
      </div>

      <div class="daochu"> <el-button @click="daocu"  style=" padding:7px 20px; border: 1px solid #0066ff;color: #0066ff;">导出</el-button></div>
        <el-table
              style="width: 1250px; margin-top:30px;"
              :header-cell-style="{ background: 'silver', color: '#606266' }"
              :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
              >
              <el-table-column
                  width="50"
              >
              </el-table-column>
              <el-table-column type="selection" width="200px"></el-table-column>
              <el-table-column label="投资记录id" width="200px" prop="investment_id"></el-table-column>
              <el-table-column label="投资项目名称" width="200px" prop="investment_name" ></el-table-column>
              <el-table-column label="投资金额" width="200px" prop="investment_money"></el-table-column>
                 <el-table-column label="投资回报率" width="200px" prop="investment_rate" :formatter="personal_data_sex"></el-table-column>
              <el-table-column label="投资时间" width="200px" prop="investment_date" :formatter="personal_data_age"></el-table-column>   
          </el-table>
          
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 4, 6, 8, 10]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px;margin-left: 150px"
            :total="list.length">
        </el-pagination>
    </div>
</template>

<script>
import axios from "axios";
import {export2Excel} from "../util"
export default {
  data () {
    return {
       columns:[
        {title:"投资记录id",key:"investment_id"},
        {title:"投资项目名称",key:"investment_name"},
        {title:"投资金额",key:"investment_money"},
        {title:"投资回报率",key:"investment_rate"},
        {title:"投资时间",key:"investment_date"},
       
      ],
      list : [],
      currentPage: 1,//初始页
      pagesize :2 ,//每页条数
      
    }
  },

  created () {
    this.findList()
  },

  methods: {
    daocu(){
      export2Excel(this.columns,this.list,"投资记录表")
    },
    findList(){
      axios({   
        url: "/api/recordinves/findRecordList",
      }).then((res) => {
          console.log(res.data);
      this.list = res.data.data;
      });
    },
    handleSizeChange (size) {
        console.log(size,'size');
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange (currentPage) {
      console.log(currentPage,'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
  },
}
</script>

<style>
.daochu{
  float: left;
  margin-left: 1200px;
}
.ck{
  width: 1250px;
  height: 1480px;
}
.header ul {
  width: 1250px;
  height: 50px;
  background-color: white;
  display: flex;
  padding-top: 20px;
  padding-left: 30px;
}
.header ul p {
  font-size: 22px;
  
}
.head-font {
  background-color: #0066ff;
  width: 7px;
  height: 25px;
  border-radius: 10px;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.state{
    margin-top:15px;
}
</style>  